<template>
	<div>
		<main-content
			v-if="showDetail === '1'"
			:tableHeight.sync="tableHeight"
			:otherDependenComponents="otherDependenComponents"
		>
			<template slot="query">
				<el-form
					ref="form"
					:inline="true"
					:model="queryData"
					class="flex-warp-container"
				>
					<el-form-item
						:label="`${$t('common.belong_merchant')}:`"
						prop="merchantId"
						class="flex-row-container"
						label-width="77px"
					>
						<merchant-select
							v-model="queryData.merchantId"
						></merchant-select>
					</el-form-item>
					<el-form-item
						:label="
							`${$t(
								'funds.fund_audit.settlement_number_periods'
							)}:`
						"
						class="flex-row-container"
						label-width="77px"
					>
						<el-date-picker
							v-model="formTime.time"
							size="medium"
							:picker-options="pickerOptionsMonth"
							format="yyyy-MM"
							type="monthrange"
							range-separator="-"
							:start-placeholder="
								$t('funds.fund_audit.start_month_placeholder')
							"
							:end-placeholder="
								$t('funds.fund_audit.end_month_placeholder')
							"
							align="right"
						></el-date-picker>
					</el-form-item>

					<el-form-item
						:label="`${$t('funds.fund_audit.lock_status')}:`"
						class="flex-row-container"
						label-width="77px"
					>
						<el-select
							v-model="queryData.lockStatus"
							style="width: 220px"
							:placeholder="$t('common.select_all')"
							clearable
						>
							<el-option
								v-for="item in lockOrderType"
								:key="item.code"
								:label="item.description"
								:value="Number(item.code)"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						:label="`${$t('funds.fund_audit.top_proxy_name')}:`"
						class="flex-row-container"
						label-width="77px"
					>
						<el-input
							v-model="queryData.proxyName"
							class="input-with-select"
							:placeholder="$t('common.please_enter')"
							clearable
							size="medium"
							v-input="{ name: 'num_alp' }"
						></el-input>
					</el-form-item>
					<el-form-item
						:label="`${$t('funds.order_no')}:`"
						class="flex-row-container"
						label-width="61px"
					>
						<el-input
							v-model="queryData.orderNo"
							class="input-with-select"
							:placeholder="$t('common.please_enter')"
							clearable
							size="medium"
							v-input="{ name: 'num_alp' }"
						></el-input>
					</el-form-item>
					<!-- <el-form-item label="">
						<el-input
							v-model="queryData.proxyName"
							clearable
							size="medium"
							style="width: 220px"
							:placeholder="$t('common.please_enter')"
							@blur="cleanBlankSpace('queryData', 'proxyName')"
						></el-input>
					</el-form-item> -->
					<el-form-item
						:label="
							`${$t('funds.fund_audit.adjust_team_commission')}:`
						"
						class="flex-row-container"
						label-width="120px"
					>
						<el-input
							v-model="queryData.mixCommissionAmount"
							size="medium"
							:placeholder="$t('common.minimum')"
							style="width: 130px"
							maxLength="15"
							v-input="{ name: 'float', num: '2' }"
							name="mixCommissionAmount"
							clearable
							@blur="
								handleAmount(
									queryData,
									1,
									'mixCommissionAmount',
									'maxCommissionAmount',
									$t(
										'funds.fund_audit.commissionAmountMin_warning'
									)
								)
							"
						></el-input>
						-
						<el-input
							v-model="queryData.maxCommissionAmount"
							size="medium"
							:placeholder="$t('common.maximum')"
							style="width: 130px"
							maxLength="15"
							v-input="{ name: 'float', num: '2' }"
							name="maxCommissionAmount"
							clearable
							@blur="
								handleAmount(
									queryData,
									2,
									'mixCommissionAmount',
									'maxCommissionAmount',
									$t(
										'funds.fund_audit.commissionAmountMax_warning'
									)
								)
							"
						></el-input>
					</el-form-item>
					<el-form-item style="margin-left: 8px">
						<el-button
							type="primary"
							icon="el-icon-search"
							size="medium"
							:disabled="loading"
							:loading="loading"
							@click="search"
						>
							{{ $t('common.search') }}
						</el-button>
						<el-button
							icon="el-icon-refresh-left"
							size="medium"
							:disabled="loading"
							@click="reset"
						>
							{{ $t('common.reset') }}
						</el-button>
					</el-form-item>
				</el-form>
				<div class="divBox">
					<p class="danger data-refresh">
						{{ $t('funds.fund_audit.data_update_time') }}：
						{{ now }}
					</p>
					<el-select
						v-model="activeCommission"
						size="mini"
						:placeholder="$t('common.please_choose')"
						@change="recordTime"
					>
						<el-option
							v-for="item in timeList"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						></el-option>
					</el-select>
				</div>
			</template>
			<template slot="content">
				<div v-if="hasPermission('407061') || hasPermission('407062')">
					<el-tabs v-model="activeName" @tab-click="switchPage">
						<el-tab-pane
							v-if="hasPermission('407061')"
							:label="$t('funds.fund_audit.wait_audit_1')"
							name="1"
						></el-tab-pane>
						<el-tab-pane
							v-if="hasPermission('407062')"
							:label="$t('funds.fund_audit.wait_audit_2')"
							name="2"
						></el-tab-pane>
					</el-tabs>
					<el-table
						v-loading="loading"
						element-loading-spinner="el-icon-loading"
						border
						size="mini"
						class="small-size-table"
						:data="tableData"
						style="width: 100%"
						:header-cell-style="getRowClass"
						:max-height="tableHeight"
					>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.lock')"
							width="60"
						>
							<template slot-scope="scope">
								<el-checkbox
									v-if="hasPermission('407063')"
									v-model="scope.row.lockOrder"
									:disabled="!showLock(scope.row)"
									@change="lockOne($event, scope.row)"
								></el-checkbox>
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('common.actions')"
							width="180"
						>
							<template slot-scope="scope">
								<el-button
									:class="!isMyAudit(scope.row) ? 'dis' : ''"
									type="primary"
									size="medium"
									@click="goDetail(scope.row)"
								>
									{{ $t('funds.fund_audit.audit') }}
								</el-button>
							</template>
						</el-table-column>

						<el-table-column
							prop="orderNo"
							align="center"
							:label="$t('funds.order_no')"
							width="270"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<Copy
									v-if="!!scope.row.orderNo"
									:title="scope.row.orderNo"
									:copy="copy"
								>
									{{ scope.row.orderNo }}
								</Copy>
								<span v-else>-</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="reportYm"
							align="center"
							:label="
								$t('funds.fund_audit.settlement_number_periods')
							"
							width="260"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								{{
									scope.row.cycleName ||
										getFormateDate(scope.row.reportYm, 'ym')
								}}
							</template>
						</el-table-column>
						<el-table-column
							prop="merchantName"
							align="center"
							:label="$t('common.belong_merchant')"
							width="150"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								{{
									merchantFilter(scope.row.merchantId) || '-'
								}}
							</template>
						</el-table-column>
						<el-table-column
							prop="proxyName"
							align="center"
							:label="$t('funds.fund_audit.top_proxy_name')"
							width="180"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<Copy
									v-if="!!scope.row.proxyName"
									:title="scope.row.proxyName"
									:copy="copy"
								>
									{{ scope.row.proxyName }}
								</Copy>
								<span v-else>-</span>
							</template>
						</el-table-column>
						<!-- <el-table-column
							prop="accountStatus"
							align="center"
							:label="$t('common.account_status')"
							width="150"
						>
							<template slot-scope="scope">
								<span
									v-if="scope.row.loginLockStatus === 1"
									class="disableRgba"
								>
									{{ $t('common.login_lock_status') }}
								</span>
								<span
									v-if="scope.row.paymentLockStatus === 1"
									class="deleteRgba"
								>
									{{$t('common.account_lock_status')}}
								</span>
								<span
									v-if="
										scope.row.loginLockStatus === 0 &&
											scope.row.paymentLockStatus === 0
									"
									class="normalRgba"
								>
									{{$t('common.account_status_normal')}}
								</span>
							</template>
						</el-table-column> -->

						<el-table-column
							align="center"
							:label="
								`${$t(
									'funds.fund_audit.adjust_team_commission'
								)}`
							"
							width="180"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span>
									{{
										handleNumber(
											scope.row.currency,
											scope.row.commissionAmount +
												scope.row.commissionAdjustAmount
										)
									}}
								</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="commissionAdjustAmount"
							align="center"
							:label="
								`${$t('funds.fund_audit.commission_adjust')}`
							"
							width="180"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span>
									{{
										handleNumber(
											scope.row.currency,
											scope.row.commissionAdjustAmount
										)
									}}
								</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="commissionAmount"
							align="center"
							:label="`${$t('funds.fund_audit.team_commission')}`"
							width="180"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span>
									{{
										handleNumber(
											scope.row.currency,
											scope.row.commissionAmount
										)
									}}
								</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="orderStatus"
							align="center"
							:label="$t('funds.fund_audit.audit_status')"
							width="180"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span
									:class="
										Number(scope.row.lockStatus) === 1
											? 'lockingRgba'
											: 'deleteRgba'
									"
								>
									{{
										typeFilter(
											scope.row.lockStatus,
											'auditStatus'
										)
									}}
								</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="lockTime"
							align="center"
							:label="$t('funds.fund_audit.lock_time')"
							min-width="220"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span v-if="!!scope.row.lockTime">
									{{ scope.row.lockTime }}
								</span>
								<span v-else>-</span>
							</template>
						</el-table-column>

						<el-table-column
							prop="lockAccount"
							align="center"
							:label="$t('funds.fund_audit.lock_account')"
							width="220"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span>
									{{ scope.row.lockAccount || '-' }}
								</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="createdAt"
							align="center"
							:label="$t('funds.apply_time')"
							min-width="220"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								{{ scope.row.createdAt || '-' }}
							</template>
						</el-table-column>
					</el-table>
					<el-row v-if="tableData.length">
						<el-col :span="24">
							<div class="grid-content">
								<el-checkbox
									v-if="hasPermission('407064')"
									v-model="lockedAllStatus"
									:label="$t('common.all')"
									name="type"
									:disabled="lockedAllDisabled"
									@change="lockAll"
								></el-checkbox>
								<el-button
									v-if="hasPermission('407066')"
									type="primary"
									size="mini"
									style="margin-left: 20px;"
									:disabled="lockedArr.length === 0"
									@click="openBatchReviewDialog"
								>
									{{ $t('funds.fund_audit.batcha_audit') }}
								</el-button>
							</div>
						</el-col>
					</el-row>
					<!-- 分页 -->
					<el-pagination
						v-if="
							hasPermission('407061') || hasPermission('407062')
						"
						:current-page.sync="pageNum"
						class="pageValue"
						background
						layout="total, sizes,prev, pager, next, jumper"
						:page-size="pageSize"
						:page-sizes="pageSizes"
						:total="total"
						@current-change="handleCurrentChange"
						@size-change="handleSizeChange"
					></el-pagination>
				</div>
				<el-empty
					v-else
					:description="$t('funds.jurisdiction_tip')"
				></el-empty>
			</template>
		</main-content>
		<detail
			v-else
			:allow-audit="allowAudit"
			:detailData="rowData"
			:activeName="activeName"
			@goBack="goBack"
		></detail>
		<!-- 批量审核弹窗 -->
		<el-dialog
			class="batch-review"
			:title="$t('funds.fund_audit.batcha_audit')"
			width="700px"
			:visible.sync="batchReviewDialog.visible"
		>
			<template>
				<div class="review-wrapper">
					<div class="top">
						<el-row>
							<el-col :span="12" class="title border-right">
								{{ $t('funds.fund_audit.audit_number') }}
							</el-col>
							<el-col :span="12" class="title">
								{{ $t('funds.fund_audit.audit_amount') }}
							</el-col>
							<el-col :span="12" class="border-right">
								<el-link
									type="primary"
									@click="batchReviewDialog.pageType = 'd'"
								>
									{{ batchReviewDialog.totalRecords }}
								</el-link>
							</el-col>
							<el-col :span="12" class="amounts-list">
								<div>
									{{
										handleNumber(
											batchReviewDialog.currency,
											batchReviewDialog.totalAmounts
										)
									}}
									<!-- <div
										v-for="item in Object.keys(
											batchReviewDialog.amounts
										)"
										:key="item"
									>
										{{
											handleNumber(
												item.currency,
												batchReviewDialog.amounts[item]
											)
										}}
									</div> -->
								</div>
							</el-col>
						</el-row>
					</div>
					<div>
						<!-- 显示批量锁单备注 -->
						<div
							v-if="batchReviewDialog.pageType === 'i'"
							class="bottom"
						>
							<el-form
								ref="batchAuditForm"
								:model="batchReviewDialog.formData"
								:rules="rules"
							>
								<div class="remark-wrapper">
									<div class="left">
										<span>{{ $t('common.remark') }}:</span>
									</div>
									<div class="right">
										<el-form-item prop="remark">
											<el-input
												v-model.trim="
													batchReviewDialog.formData
														.remark
												"
												type="textarea"
												:rows="6"
												maxlength="500"
												show-word-limit
												:placeholder="
													$t(
														'funds.fund_audit.form_remark_placeholder'
													)
												"
												resize="none"
												v-input="{ name: 'noEmpty' }"
											></el-input>
										</el-form-item>
									</div>
								</div>
							</el-form>
						</div>
						<!-- 查看锁单明细 -->
						<div v-else>
							<el-table
								v-loading="batchReviewDialog.loading"
								border
								height="311"
								size="mini"
								class="small-size-table"
								:data="lockedArr"
								style="width: 100%"
								:header-cell-style="{ background: '#e6e6e6' }"
							>
								<el-table-column
									align="center"
									type="index"
									:label="$t('common.serial_number')"
								></el-table-column>
								<el-table-column
									align="center"
									:label="
										$t(
											'funds.proxy_member_funds_record.top_proxy_name'
										)
									"
									prop="proxyName"
								></el-table-column>
								<el-table-column
									align="center"
									:label="
										`${$t(
											'funds.fund_audit.team_commission_amount'
										)}`
									"
									prop="commissionAmount"
								>
									<template slot-scope="scope">
										{{
											handleNumber(
												scope.row.currency,
												scope.row.commissionAmount
											)
										}}
									</template>
								</el-table-column>
							</el-table>
						</div>
					</div>
				</div>
				<div slot="footer">
					<div
						v-if="batchReviewDialog.pageType === 'i'"
						class="center-wrap"
					>
						<el-button
							:disabled="batchReviewDialog.loading"
							size="small"
							@click="batchReviewDialog.visible = false"
						>
							{{ $t('common.cancel') }}
						</el-button>
						<el-button
							:disabled="batchReviewDialog.loading"
							type="success"
							size="small"
							@click="openSeaMoonDialog(true, 1)"
						>
							<i
								v-show="
									batchReviewDialog.loading &&
										batchReviewDialog.btnType === 1
								"
								class="el-icon-loading"
							></i>
							{{
								activeName === '1'
									? $t('funds.fund_audit.audit_success_1')
									: $t('funds.fund_audit.audit_success_2')
							}}
						</el-button>
						<el-button
							:disabled="batchReviewDialog.loading"
							type="danger"
							size="small"
							@click="openSeaMoonDialog(true, 2)"
						>
							<i
								v-show="
									batchReviewDialog.loading &&
										batchReviewDialog.btnType === 2
								"
								class="el-icon-loading"
							></i>
							{{
								activeName === '1'
									? $t('funds.fund_audit.audit_fail_1')
									: $t('funds.fund_audit.audit_fail_2')
							}}
						</el-button>
					</div>
					<div v-else class="center-wrap">
						<el-button
							size="small"
							type="primary"
							@click="batchReviewDialog.pageType = 'i'"
						>
							{{ $t('common.sure') }}
						</el-button>
					</div>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { getUsername, getUserInfo } from '@/utils/auth'
import { routerNames } from '@/utils/consts'
import MainContent from '@/components/MainContent/index.vue'
const end = () => {
	return dayjs().endOf('month')
}
const start = () => {
	return dayjs()
		.startOf('month')
		.subtract(29, 'day')
}

export default {
	name: routerNames.commissionReview,
	components: { detail: () => import('./components/detail'), MainContent },
	mixins: [list],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: ['reviewBtn', 'reviewTab'],
			queryData: {
				lockStatus: undefined,
				orderNo: undefined,
				lockAccount: undefined,
				mixCommissionAmount: undefined,
				maxCommissionAmount: undefined,
				inputType: 1
			},
			tableData: [],
			lockedAllStatus: false,
			lockedAllDisabled: false,
			lockedArr: [],
			batchReviewDialog: {
				loading: false,
				btnType: '',
				pageType: 'i',
				visible: false,
				totalRebateAmount: 0,
				totalRecords: 0,
				amounts: {},
				formData: {
					remark: undefined,
					ids: []
				}
			},
			allowAudit: false,
			showDetail: '1',
			formTime: {
				time: [start(), end()]
			},
			rowData: {},
			now: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
			userName: '',
			activeName: '1',
			rules: {
				remark: [
					{
						required: true,
						message: this.$t('funds.fund_audit.form_rules_tip2'),
						trigger: 'blur'
					},
					{
						min: 2,
						max: 500,
						message: this.$t('funds.fund_audit.form_rules_tip2'),
						trigger: 'blur'
					}
				]
			},
			accountStatus: undefined,
			timeList: [],
			commissionTimer: null,
			activeCommission: this.$t('funds.fund_audit.no_reload'),
			showClear1: false,
			showClear2: false,
			seaMoon: {
				isAudit: false,
				visible: false,
				params: {}
			},
			highTable: 0
		}
	},
	computed: {
		lockOrderType() {
			return this.globalDics.lockStatus || []
		},
		orderStatusArr() {
			//  0-待一审 1-一审拒绝 2-待二审 3-二审拒绝 3-二审通过
			return [
				{
					code: '0',
					description: this.$t('funds.fund_audit.wait_audit_1')
				},
				{
					code: '1',
					description: this.$t('funds.fund_audit.audit_fail_1')
				},
				{
					code: '2',
					description: this.$t('funds.fund_audit.wait_audit_2')
				},
				{
					code: '3',
					description: this.$t('funds.fund_audit.audit_fail_2')
				},
				{
					code: '4',
					description: this.$t('funds.fund_audit.pass_the_audit')
				}
			]
		}
	},
	watch: {
		// 'queryData.mixCommissionAmount'() {
		// 	if (
		// 		this.queryData.mixCommissionAmount >
		// 		this.queryData.maxCommissionAmount
		// 	) {
		// 		this.queryData.maxCommissionAmount =
		// 			this.queryData.mixCommissionAmount + 0.01
		// 	}
		// }
	},
	created() {
		if (this.hasPermission('407061') || this.hasPermission('407062')) {
			this.getKvconfigList()
		}
		if (this.hasPermission('407061')) {
			this.activeName = '1'
		} else if (this.hasPermission('407062')) {
			this.activeName = '2'
		} else {
			this.activeName = ''
		}
		this.userName = getUsername()
		this.userInfo = getUserInfo()
	},

	activated() {
		if (this.hasPermission('407061') || this.hasPermission('407062')) {
			if (Number(this.activeCommission)) {
				this.commissionTimer = setInterval(
					this.loadData,
					this.activeCommission * 1000
				)
			} else {
				clearInterval(this.commissionTimer)
			}
		}
	},
	deactivated() {
		clearInterval(this.commissionTimer)
	},
	beforeDestroy() {
		clearInterval(this.commissionTimer)
		this.commissionTimer = null
	},
	mounted() {
		// this.calHeight()
		// const _self = this
		// window.onresize = () => {
		// 	_self.calHeight()
		// }
	},
	methods: {
		calHeight() {
			this.$nextTick(() => {
				const rect = this.$refs.container?.getBoundingClientRect()
				if (rect?.height) {
					this.highTable = window.innerHeight - rect.height - 350
				}
			})
		},
		hiddenClearIcon(key) {
			setTimeout(() => {
				this[key] = false
			}, 200)
		},
		clearable(key) {
			this.$delete(this.queryData, key)
		},
		cleanBlankSpace(key, key1) {
			if (this[key][key1]) {
				this[key][key1] = (this[key][key1] + '').replace(/\s+/g, '')
			}
		},
		onSeaMoonValidSucceed(data) {
			if (this.seaMoon.isAudit) {
				this.handleBatchReview()
			}
		},
		// isAudit: 是否是审核操作
		// type: 1 通过  2 拒绝
		openSeaMoonDialog(isAudit, type) {
			if (isAudit) {
				this.$refs.batchAuditForm.validate((valid) => {
					if (valid) {
						this.batchReviewDialog.btnType = type
						this.handleBatchReview()
					}
				})
				this.seaMoon.isAudit = isAudit
			} else {
				this.seaMoon.visible = true
			}
		},
		search() {
			this.pageNum = 1
			clearInterval(this.commissionTimer)
			this.commissionTimer = null
			if (Number(this.activeCommission)) {
				this.commissionTimer = setInterval(
					this.loadData,
					this.activeCommission * 1000
				)
			}
			this.loadData()
		},
		getOrderStatusColor(row) {
			if (row.lockStatus === 1) {
				return 'lockingRgba'
			} else if ([0, 2].includes(Number(row.orderStatus))) {
				return 'disableRgba'
			}
		},
		recordTime(val) {
			this.activeCommission = val
			if (Number(val)) {
				clearInterval(this.commissionTimer)
				this.commissionTimer = setInterval(this.loadData, val * 1000)
			} else {
				clearInterval(this.commissionTimer)
			}
		},
		getKvconfigList() {
			this.timeList = []
			let str = ''
			let arr = []
			const params = {
				k: 'funds.audit.pagerefresh.interval.config',
				pageNum: 1,
				pageSize: 10
			}
			this.$api.getkvconfigQueryList(params).then((res) => {
				if (res.code === 200 && res.data) {
					const val = res.data.records[0] || []
					if (val.v) {
						str = val.v
						arr = str.split(',').sort()
						arr.forEach((item, index) => {
							const obj = {}
							if (Number(item) === 0) {
								obj.label = this.$t(
									'funds.fund_audit.no_reload'
								)
								obj.value = this.$t(
									'funds.fund_audit.no_reload'
								)
								this.timeList.push(obj)
								this.activeCommission = this.$t(
									'funds.fund_audit.no_reload'
								)
								this.commissionTimer = null
							} else if (Number(item)) {
								obj.label =
									item + this.$t('funds.fund_audit.second')
								obj.value = item
								this.timeList.push(obj)
							}
							// if (Number(item) && index === 1) {
							// 	this.activeCommission = item
							// 	this.commissionTimer = setInterval(this.loadData, item * 1000)
							// }
						})
					}
				}
			})
		},
		showLock(rowData) {
			// if (this.activeName === '2' && ((!!rowData.lockAccountId && this.userInfo.id === rowData.lockAccountId) || (!rowData.lockAccountId && this.userName === rowData.lockAccount))) {
			// 	return false
			// }
			// return (
			// 	(!!rowData.lockAccountId &&
			// 		this.userInfo.id === +rowData.lockAccountId) ||
			// 	(!rowData.lockAccountId &&
			// 		this.userName === rowData.lockAccount) ||
			// 	!rowData.lockAccount
			// )
			return (
				rowData.lockStatus === 0 ||
				(rowData.lockStatus === 1 &&
					this.userName === rowData.lockAccount)
			)
		},
		switchPage() {
			this.pageNum = 1
			this.search()
		},
		filterOrderStatus(code, lock) {
			if (lock === 1) {
				return this.activeName === '1'
					? this.$t('funds.fund_audit.review_of_trial_1')
					: this.$t('funds.fund_audit.review_of_trial_2')
			} else {
				const item = this.orderStatusArr.find(
					(item) => item.code === String(code)
				)
				return item ? item.description : '-'
			}
		},
		loadData() {
			if (!this.activeName) return
			this.loading = true
			const [startTime, endTime] = this.formTime.time || []
			/**
			 * 最大拥金 - maxCommissionAmount
			 * 最小拥金 - mixCommissionAmount
			 * 锁单状态 - lockStatus
			 * 商户号 - merchantId
			 * 订单号 - orderNo
			 * 当前页,默认第1页 - pageNum
			 * 每页条数,默认20条 - pageSize
			 * 代理账号 - proxyName
			 * 佣金月份-结束 - reportYmEnd
			 * 佣金月份-开始 - reportYmStart
			 */
			let params = {
				...this.queryData,
				cycleStartDate: startTime
					? dayjs(startTime)
							.startOf('month')
							.format('YYYYMMDD')
					: undefined,
				cycleEndDate: endTime
					? dayjs(endTime)
							.endOf('month')
							.format('YYYYMMDD')
					: undefined
			}
			params = {
				...this.getParams(params)
			}
			Object.keys(params).forEach((key) => {
				if (!params[key]) {
					params[key] = undefined
				}
			})
			// if (params.inputType === 1) {
			// 	params.proxyName = params.inputValue || undefined
			// 	params.orderNo = undefined
			// } else {
			// 	params.orderNo = params.inputValue || undefined
			// 	params.proxyName = undefined
			// }
			// delete params.inputValue
			// delete params.inputType
			this.lockedArr = []
			params.qryType = Number(this.activeName)
			// const type =
			// 	this.activeName === '1'
			// 		? 'getProxyCommissionAuditFirstAuditList'
			// 		: 'getProxyCommissionAuditSecondAuditList'
			this.$api
				.getProxyCommissionWaitAuditList(params)
				.then((res) => {
					this.now = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
					const { record, totalRecord } = res.data || {}
					this.loading = false
					this.tableData = record || []
					this.total = totalRecord || 0
					if (this.tableData) {
						// 未显示勾选数量
						let unableNum = 0
						this.tableData.forEach((item) => {
							item.lockOrder = Boolean(item.lockStatus)
							// 判断已经被当前账号锁单的记录
							if (
								item.lockStatus === 1 &&
								((!!item.lockAccountId &&
									this.userInfo.id === +item.lockAccountId) ||
									(!item.lockAccountId &&
										this.userName === item.lockAccount))
							) {
								this.lockedArr.push(item)
							}

							// 未显示勾选的记录
							if (
								item.lockStatus === 1 &&
								!(
									(!!item.lockAccountId &&
										this.userInfo.id ===
											+item.lockAccountId) ||
									(!item.lockAccountId &&
										this.userName === item.lockAccount)
								)
							) {
								unableNum++
							}
						})

						this.lockedAllStatus =
							this.tableData.length ===
							this.lockedArr.length + unableNum
						this.lockedAllDisabled =
							unableNum === this.tableData.length
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		isMyAudit(rowData) {
			return (
				rowData.lockStatus === 1 &&
				this.userName === rowData.lockAccount
			)
		},
		goDetail(rowData) {
			// this.allowAudit =
			// 	(!!rowData.lockAccountId &&
			// 		this.userInfo.id === +rowData.lockAccountId) ||
			// 	(!rowData.lockAccountId &&
			// 		this.userName === rowData.lockAccount)
			this.allowAudit = this.isMyAudit(rowData)
			this.rowData = rowData
			this.showDetail = '2'
		},
		goBack() {
			this.showDetail = '1'
			this.loadData()
			// this.tableData = []
			// this.search()
		},
		reset() {
			this.queryData = {
				lockStatus: undefined,
				orderNo: undefined,
				lockAccount: undefined,
				mixCommissionAmount: undefined,
				maxCommissionAmount: undefined,
				inputType: 1
			}
			this.formTime = {
				time: [start(), end()]
			}
			this.search()
		},
		reloadTime() {
			this.formTime = {
				time: [start(), end()]
			}
		},
		handleCurrentChange(val) {
			this.pageNum = val
			clearInterval(this.commissionTimer)
			this.commissionTimer = null
			if (Number(this.activeCommission)) {
				this.commissionTimer = setInterval(
					this.loadData,
					this.activeCommission * 1000
				)
			}
			this.loadData()
		},
		handleSizeChange(val) {
			this.pageSize = val
			clearInterval(this.commissionTimer)
			this.commissionTimer = null
			if (Number(this.activeCommission)) {
				this.commissionTimer = setInterval(
					this.loadData,
					this.activeCommission * 1000
				)
			}
			this.loadData()
		},
		// 打开批量审核弹窗
		openBatchReviewDialog() {
			this.batchReviewDialog.formData.ids = []
			if (this.lockedArr.length > 0) {
				this.batchReviewDialog.currency = this.lockedArr[0].currency
				this.batchReviewDialog.amounts = {}
				this.batchReviewDialog.visible = true
				this.batchReviewDialog.pageType = 'i'
				this.batchReviewDialog.formData.remark = undefined
				this.batchReviewDialog.totalRebateAmount = 0
				this.batchReviewDialog.totalRecords = this.lockedArr.length
				this.batchReviewDialog.totalAmounts = 0
				let totalAmounts = 0
				this.lockedArr.forEach((item) => {
					this.batchReviewDialog.formData.ids.push(item.id)
					totalAmounts += parseFloat(item.commissionAmount)
				})
				this.batchReviewDialog.totalAmounts = totalAmounts
				// const amounts = {}
				// this.lockedArr.forEach((item) => {
				// 	this.batchReviewDialog.formData.ids.push(item.id)
				// 	if (amounts[item.currency]) {
				// 		amounts[item.currency] += new Decimal(
				// 			amounts[item.currency]
				// 		)
				// 			.add(item.commissionAmount)
				// 			.toNumber()
				// 	} else {
				// 		amounts[item.currency] = new Decimal(
				// 			item.commissionAmount
				// 		).toNumber()
				// 	}
				// })
				// this.batchReviewDialog.currency = this.lockedArr[0].currency
				// this.batchReviewDialog.amounts = amounts
			}
		},
		// 提交批量审核
		handleBatchReview() {
			this.batchReviewDialog.loading = true
			/**
			 * 审核备注 - auditDesc
			 * 审核环节 - auditStatus
			 * 订单号 - ids
			 * 审核结果 - operationId
			 */
			// const params = {
			// 	operationId: this.batchReviewDialog.btnType,
			// 	ids: this.batchReviewDialog.formData.ids,
			// 	auditDesc: this.batchReviewDialog.formData.remark,
			// 	auditStatus: this.activeName
			// }
			const params = {
				ids: this.batchReviewDialog.formData.ids,
				remark: this.batchReviewDialog.formData.remark,
				auditStatus: this.batchReviewDialog.btnType
			}
			// request
			this.$api
				.proxyCommissionAuditRecord(params)
				.then((res) => {
					this.$message.success(
						this.$t('funds.fund_audit.batcha_audit_success')
					)
					this.batchReviewDialog.visible = false
					this.batchReviewDialog.loading = false
					this.search()
				})
				.catch(() => {
					this.batchReviewDialog.loading = false
					this.batchReviewDialog.loading = false
				})
		},
		// 提交批量锁单
		handleLockOrder(params) {
			const loading = this.$loading({
				lock: true,
				text: 'Loading',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.3)'
			})
			// const apiName =
			// 	type === 1
			// 		? 'proxyCommissionAuditLockRecord'
			// 		: 'proxyCommissionAuditBatchLock'
			this.$api
				.proxySettlementCommissionRecord(params)
				.then(() => {
					this.tableData = this.tableData.filter(() => true)
					this.$message({
						type: 'success',
						message: this.$t('common.action_success')
					})
					loading.close()
					this.search()
				})
				.catch(() => {
					this.tableData = this.tableData.filter(() => true)
					loading.close()
					this.search()
				})
		},
		// 单个锁单
		lockOne(status, rowData) {
			const params = {
				idList: [rowData.id],
				lockType: 1, // 1表示单个锁单
				lockStatus: status ? 1 : 0
				// proxyName: rowData.proxyName,
				// reportYm: rowData.reportYm
			}
			this.handleLockOrder(params)
		},
		// 批量锁单
		lockAll(status) {
			const lockIds = []
			this.tableData.forEach((item) => {
				if (status) {
					if (!item.lockAccountId) {
						lockIds.push(item.id)
					}
				} else {
					if (
						!!item.lockAccountId &&
						this.userInfo.id === +item.lockAccountId
					) {
						lockIds.push(item.id)
					}
				}
			})
			/**
			 * 订单ID - id
			 * 锁单状态 - lockStatus
			 */
			if (lockIds.length > 0) {
				const params = {
					idList: lockIds,
					lockType: 2, // 表示多个锁单
					lockStatus: status ? 1 : 0
				}
				this.handleLockOrder(params)
			}
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
::v-deep .caret-wrapper {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.divBox {
	display: flex;
	.el-select {
		width: 100px;
	}
}
.data-refresh {
	margin-top: 0;
	padding-bottom: 20px;
	line-height: 28px;
	margin-right: 20px;
}
.grid-content {
	height: 45px;
	line-height: 45px;
	padding: 2px 0;
	border: 1px solid #ebeef5;
}
.grid-content {
	height: 45px;
	line-height: 45px;
	padding: 2px 22px;
	border: 1px solid #ebeef5;
}
.batch-review {
	.el-dialog__title {
		font-weight: 550;
	}
	.el-dialog__body {
		padding: 10px 20px;
	}
	.review-wrapper {
		height: auto;
		display: flex;
		flex-direction: column;
		border: 1px solid rgba(0, 0, 0, 0.164);
		.top {
			border-bottom: 1px solid rgba(0, 0, 0, 0.164);
			.check-details {
				padding: 10px;
				font-size: 15px;
				font-weight: 600;
				span {
					font-size: 12px;
					color: #038eff;
					cursor: pointer;
				}
			}
			.el-row {
				text-align: center;
				.title {
					background-color: rgba(0, 0, 0, 0.08);
					border-top: 1px solid rgba(0, 0, 0, 0.164);
					border-bottom: 1px solid rgba(0, 0, 0, 0.164);
					font-weight: 550;
				}
				.border-right {
					border-right: 1px solid rgba(0, 0, 0, 0.164);
				}

				.el-col {
					height: 40px;
					line-height: 40px;
				}
				.amounts-list {
					border-left: 1px solid rgba(0, 0, 0, 0.164);
					height: auto;
					min-height: 40px;
					padding: 10px 0;
					line-height: 20px;
				}
			}
		}
		.bottom {
			flex: 1;
			.remark-wrapper {
				display: flex;
				height: 100%;
				.left {
					display: flex;
					flex-direction: column;
					text-align: center;
					justify-content: space-around;
					width: 100px;
					border-right: 1px solid rgba(0, 0, 0, 0.164);
					position: relative;
					&::after {
						content: '*';
						color: red;
						position: absolute;
						top: 72px;
						left: 12px;
					}
				}
				.right {
					flex: 1;
					padding: 12px 10px 0px;
				}
			}
		}
	}
	.detail-header {
		.title {
			font-weight: 600;
			font-size: 15px;
		}
		display: flex;
		justify-content: space-between;
		border: 1px solid #ebeef5;
		align-items: center;
		padding: 10px;
	}
	::v-deep .el-table {
		margin-bottom: 10px;
	}
	::v-deep .el-textarea__inner {
		border: 0 none;
	}
	::v-deep .el-form-item__error {
		top: 155px;
	}
}
::v-deep .el-input-group__prepend {
	width: 110px;
}
.center-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
}
.el-input-number_container {
	display: inline-block;
	position: relative;
	.close_icon {
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
		cursor: pointer;
		color: #ccc;
	}
}
</style>
